import { $ } from './library/jquery-module.js';
import './library/jquery.lazyload.js';

$.ajax({
    type: "get",
    url: "../../interface/getData.php?state=2",
    dataType: "json",
    success: function(res) {
        let temp = '';
        res.forEach(elm => {
            let picture = JSON.parse(elm.picture);
            temp += `<div class="col-md-3">
                <a href="./meishi.html?id=${elm.id}" class="todetail">
                <div class="thumbnail producta">
                    <img class="lazy" data-original="../${picture[0].src}" alt="...">
                    <div class="caption">
                        <p class="product-title">${elm.title}</p>
                        <p class="sub-title">${elm.subtitle}</p>
                        <p class="price">
                            <span>￥</span>${elm.price} <span>起</span>
                        </p>
                    </div>
                </div>
                </a>
            </div>`;
        });

        $('#ajax2').html(temp);
        $(function() {
            $("img.lazy").lazyload({
                placeholder: "../img/zwt",
                effect: "fadeIn"
            });
        });
    }
});